﻿@model Chat_WebClient.Models.LoginModel
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="../../Content/jquery-ui-1.9.1.custom.css" />
    <link rel="stylesheet" type="text/css" href="../../Content/home-style.css" />
    <style>
        #tabs li .ui-icon-close
        {
            float: left;
            margin: 0.4em 0.2em 0 0;
            cursor: pointer;
        }
    </style>
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"
     type="text/javascript"></script>
    <link href="@Url.Content("~/Content/openid-shadow.css")"
     rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/openid.css")" 
     rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/openid-en.js")" 
     type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/openid-jquery.js")" 
     type="text/javascript"></script>
    <script src="../../Content/js/jquery-1.8.2.js"></script>
    <script src="../../Content/js/jquery-ui-1.9.1.custom.js"></script>
    <script src="../../Content/js/chat.js"></script>
    <script src="../../Content/js/login.js"></script>
    <script src="../../Content/js/profile.js"></script>
    <script src="../../Content/js/friend.js"></script>
    <script type="text/javascript">
 	$(document).ready( function(){    
            if($("#OpenID").val() != "")            
                document.getElementById("login").click();                    
			$('#sendButton').button();
			$('#loginButton').button();
			$('#registerButton').button();
			$('#content').css('opacity', '0');
			$('#footer').css('opacity','0');
			$('#profile').css('opacity','0');
			var height = screen.height;
			var width = screen.width;
			$('#loginButton').css("right",width/2 + 30);
			$('#registerButton').css("right", width/2 - 100);
			$('#Login_form').css("right", width/2 - 140);
			$('#SignupForm').css("right", width/2 - 140);
            $('#OpenIDForm').css("right", width/2 - 140);
            
			$('#friendDialog').dialog({
				autoOpen:false,
				modal: true,
				buttons:
				{
					"Add friend": addFriend,
					Cancel: function(){$(this).dialog('close');}
				}
				});
			$('#acceptFriendDialog').dialog({
				autoOpen:false,
				modal: true,
				width: 320,
				buttons:
				{
					Cancel: function(){$(this).dialog('close');}
				}
				});
			$('#addfriend').click(function(){
				if($('#typeChat option:selected').text() == 'Ajax chat')	
					$('#friendDialog').dialog('open');
				else
					alert('Not support!');
			});
            $('#googlemap').click(function(){
                window.open("home/googlemap", "Google map");
            });
			$('#avatarDialog').dialog({
				autoOpen:false,
				modal: true,
				width: 450,
				buttons:
				{
					"Change": function(){
						sendAvatar();
                        $("#FormUpload").submit();
						$(this).dialog('close');
					},
					Cancel: function(){$(this).dialog('close');}
				}
				});
			$('#changeavatar').click(function(){
				if($('#typeChat option:selected').text() == 'Ajax chat')
				{
                    $('#UserNameUpload').val($('#select').text());
					$('#avatarImg').attr('src','http://localhost:53220/api/avatar?username=' + $('#select').text());
					$('#avatarDialog').dialog('open');	

				}
				else
					alert('Not support!');
			});
			$('#loginButton').click(function() {
				playSound('sound/message.wav');
				$('#submit').hide().css({'left' : '0px'});
				$('#SignupForm').hide().css({'top' : '0px'});
				
                if($('#typeChat option:selected').text() == 'OpenID Login')
		        {
                    $('#login').hide().css({'left' : '0px'});
                    $('#Login_form').hide().css({'top' : '0px'});
			        $('#OpenIDForm').show().animate({
			
					        top   : '100px',
					
				        },700,function(){
					
					        //$('#image').css({'-webkit-transform' : 'rotate(-90deg)','-moz-transform' : 'rotate(-90deg)' });
				    });
                }else{
                    $('#OpenIDForm').hide().css({'top' : '0px'});
				    $('#login').show().animate({
				
					    left   : width/2 + 160,
					
				    },400,function(){
					
					    $('#login').css({'-webkit-transform' : 'rotate(-0deg)','-moz-transform' : 'rotate(-0deg)' });
				
				    });
				    ///
				    $('#Login_form').show().animate({
			
					    top   : '100px',
					
				    },700,function(){
					
					    //$('#image').css({'-webkit-transform' : 'rotate(-90deg)','-moz-transform' : 'rotate(-90deg)' });
				    });
                }
			});
			
			$('#registerButton').click(function() {
				playSound('sound/online.wav');
				$('#login').hide().css({'left' : '0px'});
				$('#Login_form').hide().css({'top' : '0px'});
				$('#OpenIDForm').hide().css({'top' : '0px'});

				$('#submit').show().animate({
				
					left   :  width/2 + 160,
					
				},400,function(){
					
					$('#submit').css({'-webkit-transform' : 'rotate(-0deg)','-moz-transform' : 'rotate(-0deg)' });
				
				});
				///
				$('#SignupForm').show().animate({
			
					top   : '100px',
					
				},700,function(){
					
					//$('#image').css({'-webkit-transform' : 'rotate(-90deg)','-moz-transform' : 'rotate(-90deg)' });
				});	
			});
			$(document).on("click",".okFr", function(){
				var friend = $(this).val();	
				acceptFriend(friend);
				$('#accept' + friend).remove();	
			});
			$(document).on("click",".okFr", function(){
				var friend = $(this).val();	
				$('#accept' + friend).remove();		
			});

            $("#chatFromPopup").click(function(){
                processChat(this.title);
            });
 	});

    </script>
    <title>Home</title>
</head>
<body style="overflow: hidden">
    <!--Dialog them ban-->
    <div id="friendDialog" title="Add friend">
        <input type="text" name="nameFriend" id="nameFriend" class="text ui-widget-content ui-corner-all"
            style="width: 250px" />
    </div>
    <input type="text" id="OpenID" style="display: none; position: absolute;" />
    <!--Dialog doi avatar-->
    <div id="avatarDialog" title="Change avatar" align="center">
        @using (Html.BeginForm("UploadAvartar","Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "FormUpload" }))
        {
            <img id="avatarImg" src="" width="128" height="128" />
            <input id="UserNameUpload" name="UserNameUpload" type="text" value="" style="display: none;
                position: absolute;">
            <input type="button" value="Browse" onclick=" $('#uploadFile').click();" />
            <input type="file" id="uploadFile" name="uploadFile" style="visibility: hidden" />
        }
    </div>
    <!--Dialog chap nhan ket ban-->
    <div id="acceptFriendDialog" title="Accept friend">
    </div>
    <div id="log">
        <button id="loginButton">
            Login</button>
        <button id="registerButton">
            Register</button>
        <select id="typeChat" style="float: right">
            <option value="">Ajax chat</option>
            <option value="7">Yahoo chat</option>
            <option value="10">OpenID Login</option>
        </select>
        <img src="../../Content/img/result.png" id="login" />
        <img src="../../Content/img/submit.png" id="submit" />
        <div class="loginform" id="Login_form">
            <form method="post" action="#">
            <div>
                <div class="form-item">
                    <label for="edit-name">
                        Username:</label>
                    <input type="text" class="form-text required" value="" size="15" id="edit-name" name="name"
                        maxlength="25">
                </div>
                <div class="form-item">
                    <label for="edit-pass">
                        Password:</label>
                    <input type="password" class="form-text required" size="15" maxlength="25" id="edit-pass"
                        name="pass">
                </div>
            </div>
            </form>
        </div>
        <div class="loginform" id="SignupForm">
            <form method="post" action="#">
            <div>
                <div class="form-item">
                    <label for="submit-name">
                        Username:</label>
                    <input type="text" class="form-text required" value="" size="15" id="submit-name"
                        name="name" maxlength="20">
                </div>
                <div class="form-item">
                    <label for="submit-pass">
                        Pass:</label>
                    <input type="password" class="form-text required" value="" size="15" id="submit-pass"
                        name="name" maxlength="12">
                </div>
                <div class="form-item">
                    <label for="submit-confirm-pass">
                        Confirm Pass:</label>
                    <input type="password" class="form-text required" size="15" id="submit-confirm-pass"
                        name="pass" maxlength="12">
                </div>
            </div>
            </form>
        </div>
        <div class="loginform" id="OpenIDForm" style="right: 320px!important; width: 650px!important;
            height: 420px!important;">
            <form action= "@Url.Action("Authenticate", new { ReturnUrl = @HttpUtility.UrlEncode(Request.QueryString["ReturnUrl"]) })"
 method="post" id="openid_form" style="padding-top: 5px!important; padding-left: 15px!important;">
            @{
                Html.RenderPartial("_LoginOpenID", Model);
            }
            </form>
        </div>
    </div>
    <div id="header">
        <img src="../../Content/img/logo.png" style="width: 200px; height: 50px" alt="LOGO" />
        <div id="profile">
            <button id="select">
                TEST</button>
            <ul>
                <li><a href="#" id="changeavatar">Change avatar</a></li>
                <li><a href="#" id="addfriend">Add friend</a></li>
                <li><a href="#" id="googlemap">Google map</a></li>
                <li><a href="#" id="logout">Log out</a></li>
                <li><a href="#">Cancel</a></li>
            </ul>
        </div>
    </div>
    <div id="content">
        <div id="tabs">
            <ul>
                <li><a href="#tabs-0">Main Chat</a></li>
            </ul>
            <div id="tabs-0">
                Main chat</div>
        </div>
        <div id="contact">
            <ul id="list">
                <div id="user" align="center">
                    <span><strong>USER ONLINE</strong></span>
                </div>
            </ul>
        </div>
    </div>
    <div id="footer">
        <div class="text_format">
            <label id="bold">
            </label>
            <label id="italic">
            </label>
            <label id="underline">
            </label>
            <select id="dropFontName">
                <option value="">Font</option>
                <option value="Arial">Arial</option>
                <option value="Verdana">Verdana</option>
                <option value="Wingdings">Wingdings</option>
                <option value="Courier">Courier</option>
                <option value="Impact">Impact</option>
                <option value="Georgia">Georgia</option>
                <option value="Comic Sans MS">Comic Sans MS</option>
            </select>
            <select id="dropFontSize">
                <option value="">Size</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="18">18</option>
                <option value="20">20</option>
                <option value="22">22</option>
                <option value="28">28</option>
                <option value="32">32</option>
            </select>
        </div>
        <div class="send_msg">
            <input id="messageInput" type="text">
            <button id="sendButton">
                Send</button>
        </div>
    </div>
    <!-- Hidden element 4 yahoo chat -->
    <div style="display: none">
        <span id="sessionID"></span><span id="oauth_token"></span><span id="oauth_token_secret">
        </span><span id="primaryLoginID"></span><span id="notifyServer"></span><span id="seq">
            0</span>
    </div>
    <span style="display: none" id="chatFromPopup" title=""></span>
    @{
        String pass = "";
        String username = "";
        if (Model != null && !String.IsNullOrEmpty(Model.OpenID))
        {
            username = Model.UserName;
            pass = Model.OpenID;
        <script>            $('#OpenID').val('@Model.OpenID');</script>
        }
        <script>
            $('#edit-name').val('@username');
            $('#edit-pass').val('@pass');                        
        </script>
    }
</body>
</html>
